<template>

  <div class="department-container">

    <div class="app-container">
      <el-card>
        <!-- 新增弹框 -->
        <el-dialog
          :title="isEdit?'编辑':'添加'"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :visible.sync="showDialog"
          @close="hClose"
        >
          <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="100px">
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="roleForm.name" />
            </el-form-item>
            <el-form-item label="角色描述">
              <el-input v-model="roleForm.description" />
            </el-form-item>
          </el-form>
          <el-row slot="footer" type="flex" justify="center">
            <el-col :span="6">
              <el-button size="small">取消</el-button>
              <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
            </el-col>
          </el-row>
        </el-dialog>
        <!-- 具体页面结构 -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="first">用户管理</el-tab-pane>
          <el-button type="primary" icon="el-icon-plus" @click="hAdd">新增</el-button>
          <el-table
            :data="roles"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              :index="indexMethod"
            />
            <el-table-column
              label="角色名称"
              prop="name"
            />
            <el-table-column
              label="描述"
              prop="description"
            />
            <el-table-column
              align="right"
              label="操作"
            >

              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="hAssign(scope.row.id)"
                >分配权限</el-button>
                <el-button
                  v-allow="'aa'"
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row justify="center">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[2, 3 , 5, 10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </el-tabs>
        <!-- 分配权限弹出框 -->
        <el-dialog :visible.sync="showAssign" title="分配权限">
          <assignPermission v-if="showAssign" :assign-id="assignId" :show-assign.sync="showAssign" />
        </el-dialog>
      </el-card>
    </div>
  </div>

</template>

<script>
import { getRoles, delRole, addRole, updateRole } from '@/api/settings.js'
import assignPermission from './assignPermission.vue'
export default {
  components: { assignPermission },
  data() {
    return {
      activeName: 'first',
      search: '',
      currentPage: 1,
      pageSize: 2,
      total: 0,
      roles: [],
      showDialog: false,
      isEdit: false,
      // 分配权限弹出框
      showAssign: false,
      // 权限列表数据
      permissionData: '',
      // 分权id
      assignId: '',
      roleForm: {
        name: '',
        description: ''
      },
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.loadRoles()
  },
  methods: {
    async hAssign(id) {
      this.showAssign = true
      // 分权id
      this.assignId = id
    },
    hClose() {
      this.$refs.roleForm.resetFields()
      this.roleForm = {}
      // this.roleForm.name = ''
      // this.roleForm.description = ''
      // this.roleForm.id = ''
    },
    hAdd() {
      this.showDialog = true
      this.isEdit = false
      // this.roleForm = {}
    },
    hSubmit() {
      this.$refs.roleForm.validate(validate => {
        if (validate) {
          this.isEdit ? this.doEdit() : this.doAdd()
        }
      })
    },
    async doAdd() {
      await addRole(this.roleForm)
      this.$message.success('添加成功')
      this.total++
      this.currentPage = Math.ceil(this.total / this.pageSize)
      this.loadRoles()
      this.showDialog = false
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.isEdit = true
      this.showDialog = true
      // 数据回填
      // this.roleForm = row
      // 解决bug,深拷贝
      this.roleForm = { ...row }
      // this.roleForm.description = this.roles[index].description
    },
    async doEdit() {
      await updateRole(this.roleForm)
      this.loadRoles()
      this.$message.success('编辑成功')
      this.showDialog = false
    },
    handleDelete(index, row) {
      // console.log(index, row)
      const id = row.id
      this.hDel(id)
      // delRole(id)
    },
    doDel(id) {
      delRole(id)
      if (this.roles.length === 1) {
        this.currentPage--
        if (this.currentPage === 0) {
          this.currentPage = 1
        }
      }
      this.loadRoles()
      this.$message.success('删除成功')
    },
    hDel(id) {
      this.$confirm('你确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDel(id)
      }).catch(() => {
        // 用户取消退出
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
      this.loadRoles()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      console.log(val)
      this.currentPage = val
      this.loadRoles()
    },
    async loadRoles() {
      const res = await getRoles(this.currentPage, this.pageSize)
      // console.log(res.data.rows)
      this.roles = res.data.rows
      this.total = res.data.total
    },
    indexMethod(index) {
      // console.log(row, '123123')
      // return row
      const val = this.currentPage * this.pageSize + index - 1
      // console.log(val)
      return val
    }
  }
}
</script>

<style>

</style>
